<template>
    <view class="content">
        <view class="box">
			<view class="item">
				<view>
					<text style="color: #ff0000;padding-right: 10rpx;">*</text>姓名
				</view>
				<view class="item-r">
					<input type="text" v-model="name" placeholder="请输入姓名" class="inp">
				</view>
			</view>
			<view class="item">
				<view>
					<text style="color: #ff0000;padding-right: 10rpx;">*</text>报告关系
				</view>
				<view class="item-r" @click="show_3 = true">
					<input type="text" v-model="role" placeholder="请选择" class="inp" disabled>
					<u-icon name="arrow-right" color="#b3b3b3" size="28" class="u-m-l-10"></u-icon>
				</view>
			</view>
			<view class="item">
				<view>
					<text style="color: #ff0000;padding-right: 10rpx;">*</text>体检时间
				</view>
				<view class="item-r" @click="show_4 = true">
					<input type="text" v-model="time" placeholder="请选择" class="inp" disabled>
					<u-icon name="arrow-right" color="#b3b3b3" size="28" class="u-m-l-10"></u-icon>
				</view>
			</view>
			<view class="item">
				<view>
					<text style="color: #fff;padding-right: 10rpx;">*</text>检查机构
				</view>
				<view class="item-r">
					<input type="text" v-model="hospital" placeholder="请输入检查机构" class="inp">
				</view>
			</view>
		</view>
		
		<view class="box u-p-t-30">
			<view class="u-flex">
				<view>
					<text style="color: #ff0000;padding-right: 10rpx;">*</text>上传体检报告或影像资料
				</view>
				<view class="item-r" @click="show_2 = true">
					<u-icon name="error-circle-fill" color="#ff8929" size="28" class="u-m-r-10"></u-icon>
					<view class="sc-tip">如何上传体检报告?</view>
				</view>
			</view>
			<view class="img-box">
				<view class="u-rela" v-if="type == 1">
					<image :src="file" class="photo" @click="previewImage(file)"></image>
					<view class="del" @click.stop="delFile">删除</view>
				</view>
				
				<view class="u-flex" v-if="type == 2">
					<view class="file">{{file}}</view>
					<uni-link :href="file" text="预览" showUnderLine="false" color="#db5b1b" font-size="14"></uni-link>
					<view class="u-p-l-50" @click="delFile">删除</view>
				</view>
				
				
				<image v-if="!file" src="../../static/image/photo.png" class="photo" @click="chooseFile"></image>
			</view>
		</view>
		
		<view class="tip" v-if="content.content">
			<view class="tit">温馨提示：</view>
			<view class="text">
				<u-parse :html="content.content"></u-parse>
			</view>
		</view>
		
		<view class="btn" @click="doSubmit">确定</view>
		
		<view class="tip2"  @click="agree">
			<view class="frame" :class="act ? 'activeIcon' : ''">
			    <u-icon name="checkbox-mark" color="#ff4800" size="30" v-if="act"></u-icon>
			</view>
		    我已阅读并同意
			<text class="tip-rule" @click.stop="show_1 = true">《隐私协议》</text>
		</view>
		
		<!-- 隐私协议 -->
		<u-popup v-model="show_1" :round="true" mode="bottom" :closeable="true" width="750rpx" height="1000rpx" border-radius="14">
		    <view class="pop-box-cou">
		        <view class="pop-title">{{privacy.title}}</view>
		        <view>
		            <scroll-view :scroll-y="true" style="height: 800rpx;">
		                <view>
		                    <u-parse :html="privacy.content"></u-parse>
		                </view>
		            </scroll-view>
		        </view>
		    </view>
		</u-popup>
		
		<!-- 如何上传体检报告 -->
		<u-popup v-model="show_2" :round="true" mode="bottom" :closeable="true" width="750rpx" height="1000rpx" border-radius="14">
		    <view class="pop-box-cou">
		        <view class="pop-title">{{rule.title}}</view>
		        <view>
		            <scroll-view :scroll-y="true" style="height: 800rpx;">
		                <view>
		                    <u-parse :html="rule.content"></u-parse>
							<!-- <rich-text :nodes="rule.content"></rich-text> -->
		                </view>
		            </scroll-view>
		        </view>
		    </view>
		</u-popup>
		
		<!-- 报告关系 -->
		<u-select v-model="show_3" mode="single-column" :list="list" @confirm="confirmRole"></u-select>
		
		<!-- 体检时间 -->
		<u-picker v-model="show_4" mode="time" @confirm="confirmTime"></u-picker>
    </view>
</template>

<script>
	import {URL} from '@/static/js/common.js'
    export default {
        data() {
            return {
				URL,
                act: false,
				show_1: false,
				show_2: false,
				show_3: false,
				show_4: false,
				content: {},
				privacy: {},
				rule: {},
				// 我本人的，我父母的，我子女的，我配偶的，其他
				list: [{value: '1',label: '我本人的'},{value: '2',label: '我父母的'},{value: '3',label: '我子女的'},
						{value: '4',label: '我配偶的'},{value: '5',label: '其他'}],
				name: '',
				role: '',
				time: '',
				hospital: '',//检查机构
				file: '',//报告
				file_id: '',
				type: '',//1-图片 2-pdf
            };
        },
        onLoad() {
            this.getContent4()
			this.getContent5()
			this.getContent6()
        },
        methods: {
            agree() {
                this.act = !this.act
                console.log('act',this.act)
            },
			
			doSubmit() {
				if (!this.name) {
					this.$toast('请输入姓名');
					return
				}
				if (!this.role) {
					this.$toast('请选择报告关系');
					return
				}
				if (!this.time) {
					this.$toast('请选择体检时间');
					return
				}
				if (!this.file) {
					this.$toast('请上传体检报告或影像资料');
					return
				}
				if (this.act == false) {
				    this.$toast('请先同意隐私协议！');
				    return
				}
				
				this.$ajax('add_reports', {
				    userToken: this.$getSync('userToken'),
					nickname: this.name,
					relation: this.role,
					report_time: this.time,
					centers: this.hospital,
					file_id: this.file_id,
					type: this.type,//文件 类型 1-图片 2-pdf
					mobile: '',
				}).then(ret => {
					if (ret.status == 0) {
				        this.$toast('提交成功')
						setTimeout(() => {
							this.$backT()
						},500)
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			confirmTime(e) {
				console.log(e)
				this.time = e.year + '-' + e.month + '-' + e.day
			},
			
			confirmRole(e) {
				console.log(e)
				this.role = e[0].label
			},
			
			// 预览图片
			previewImage(url) {
			    let urlImage = []
			    urlImage[0] = url
			    uni.previewImage({
			        urls: urlImage,
			        current: 0
			    })
			},
			
			delFile() {
				this.file = ''
				this.file_id = ''
				this.type = ''
			},
			
			chooseFile() {
				let _this = this
				uni.chooseFile({
				    count: 1, 
				    extension:['.jpeg','.jpg','.png','.pdf'],
					success: (res) => {
						console.log(res,res.tempFiles[0],res.tempFiles[0].type);
						let type = ''
						if (res.tempFiles[0].type == 'application/pdf') {
							type = 'file'
						} else {
							type = 'image'
						}
						
						_this.uploadFile(res.tempFilePaths[0],type)
					},
					
				});
			},
			
			uploadFile(url,type) {
				console.log('uploadFile', url, type)
				
				uni.uploadFile({
				    url: this.URL + 'api/v1/upload',
				    filePath: url,
				    name: 'imgFile',
				    formData: {
				        type: type,
						userToken: this.$getSync('userToken'),
				    },
				    success: (result) => {
						let data = JSON.parse(result.data).data; //后台返回的路径data.attach_uri
				        console.log(data)
						this.file = data.attach_uri
						this.file_id = data.id
						this.type = data.type
				    }
				});
			},
			
			getContent4() {
				this.$ajax('get_content', {
			        type: 4,
					//3线上咨询服务协议 4上传体检报告温馨提示 5隐私协议 6如何上传体检报告 7极速问诊须知 
					//8体检须知 9体检项目提示 10体检预约温馨提示 11赠送亲友温馨提示 12会员服务协议
					//13购卡订单提示 14激活码开卡提示 15我要挂号须知
			    }).then(ret => {
					if (ret.status == 0) {
			            this.content = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			getContent5() {
				this.$ajax('get_content', {
			        type: 5,
					//3线上咨询服务协议 4上传体检报告温馨提示 5隐私协议 6如何上传体检报告 7极速问诊须知 
					//8体检须知 9体检项目提示 10体检预约温馨提示 11赠送亲友温馨提示 12会员服务协议
					//13购卡订单提示 14激活码开卡提示 15我要挂号须知
			    }).then(ret => {
					if (ret.status == 0) {
			            this.privacy = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			getContent6() {
				this.$ajax('get_content', {
			        type: 6,
					//3线上咨询服务协议 4上传体检报告温馨提示 5隐私协议 6如何上传体检报告 7极速问诊须知 
					//8体检须知 9体检项目提示 10体检预约温馨提示 11赠送亲友温馨提示 12会员服务协议
					//13购卡订单提示 14激活码开卡提示 15我要挂号须知
			    }).then(ret => {
					if (ret.status == 0) {
			            this.rule = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	.file{
		flex: 1;
		word-break: break-all;
		white-space: pre-line;
		padding-right: 30rpx;
	}
	
	.del{
		position: absolute;
		right: 16rpx;
		bottom: 15rpx;
		color: #FFFFFF;
		font-size: 22rpx;
		padding: 7rpx 12rpx;
		background-color: #000000;
		opacity: .7;
		border-radius: 5rpx;
	}
	
	
	
    page{
        background-color: #f5f5f5;
    }
	.content{
		padding: 30rpx 20rpx;
	}
	.box{
		padding: 0 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #e6e6e6;
	}
	.item:last-child{
		border-bottom: none;
	}
	.item-r{
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.inp{
		flex: 1;
		text-align: right;
		padding-left: 20rpx;
		font-size: 28rpx;
	}
	.sc-tip{
		font-size: 24rpx;
		color: #fe8929;
	}
	
	.img-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		padding-top: 30rpx;
		padding-bottom: 20rpx;
	}
	.photo{
		width: 187rpx;
		height: 187rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
	}
	
	.tip{
		padding-top: 15rpx;
	}
	.tit{
		font-size: 24rpx;
		font-weight: bold;
		color: #5c667b;
		padding-bottom: 10rpx;
	}
	.text{
		font-size: 24rpx;
		color: #a0a8b8;
	}
	.btn{
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		margin: 40rpx 20rpx;
		background: #01b8bd;
		border-radius: 50rpx;
	}
	
	.pop-box-cou{
	    padding: 0 30rpx;
	}
	.pop-title{
	    font-size: 34rpx;
	    font-weight: bold;
	    text-align: center;
	    padding: 30rpx;
	}
	
	.tip2{
		display: flex;
		justify-content: center;
		align-items: center;
	    font-size: 24rpx;
	}
	.tip-rule{
	    color: #ff8929;
	}
	.frame {
	    width: 33rpx;
	    height: 33rpx;
	    border-radius: 50%;
	    border: 2rpx solid #cdcdcd;
	    position: relative;
	    margin-right: 12rpx;
	    margin-top: 4rpx;
	
	    /deep/ u-icon {
	        transform: scale(0);
	        position: absolute;
	        top: -7%;
	        left: -2%;
	    }
	}
	
	.activeIcon {
	    /deep/ u-icon {
	        transform: scale(1);
	    }
	}
	
</style>
